<template>
    <div class="share_content">
        <!-- 分享弹窗 -->
        <nut-overlay v-model:visible="isShow" @click="isShow = false">
            <div class="share_main">
                <ImgT src="/imgs/me/share_top.webp" class="top_img" alt="" />
                <div class="share_img">
                    <div class="qr_code_wrap">
                        <vue-qr id="qrid" backgroundColor="#515089" :text="baseUrl"
                            :size="200" logoSrc="/imgs/me/logo.webp" class="qr_code"></vue-qr>
                    </div>
                    <div class="share_bottom">
                        <nut-button class="save" @click="toSave">{{ t('save_image')}}</nut-button>
                        <nut-button class="copy" @click="copyClick">{{ t('copy_link') }}</nut-button>
                    </div>
                    <ImgT src="/imgs/me/close.webp" @click="isShow = false" v-shrink-on-click class="close" alt="" />
                </div>

            </div>
        </nut-overlay>
        <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
    </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, watch } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import { copyFn } from '@/utils/publicMethods'
import { useI18n } from "vue-i18n";

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

const { t } = useI18n();
const toast_value = ref()
const showToast = ref(false)
const props = defineProps({
    type: {
        type: Number,
        default: 1
    },
    visible: {
        type: Boolean,
        default: true,
    },
    id: {
        type: Number || String,
        default: 0
    }
})
const emit = defineEmits(['update:visible', 'close', 'updata']);
const isShow = computed({
    get: function () {
        return props.visible;
    },
    set: function (value) {
        emit('update:visible', value);
    },
});

const baseUrl = ref('')

// 复制
const copyClick = () => {
    copyFn(baseUrl.value)
    showToast.value = true
    toast_value.value = 'copy_success'
}

// 前往下载
const toSave = () => {
    let picData = document.getElementById('qrid') as HTMLImageElement; //生成二维码之后其实是个img
    if (picData) {
        let a = document.createElement('a');
        a.href = picData.src;
        a.download = `image.png`;
        a.click();
        setTimeout(() => {
            a.remove();
        }, 1000);
    }

}

// 俱乐部分享
const getClubShare = () => {
  const req = NetPacket.req_club_share();
  req.club_id = props.id
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_club_share",
    callback: getClubShareHandle,
  });
};
// 俱乐部分享返回
const getClubShareHandle = (res: any) => {
  console.log('俱乐部分享', res)
  const parsedObject  = JSON.parse(res.url) 
  baseUrl.value = `${parsedObject.h5_api_url}?club_id=${res.club_id}&invite_code=${res.invite_code}`
};

// 赛事分享
const tournamentEventsShare = () => {
  const req = NetPacket.req_tournament_events_share();
  req.room_id = props.id
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_tournament_events_share",
    callback: onClickShareHandle,
  });
}
// 赛事分享返回
const onClickShareHandle = (res: any) => {
  console.log('赛事分享', res)
  const parsedObject  = JSON.parse(res.url)
  emit('updata', res.result)
  baseUrl.value = `${parsedObject.h5_api_url}?room_id=${res.room_id}&invite_code=${res.invite_code}`
};
// 监听分享弹框的显示
watch(() => props.visible, (newVal) => {
  if (newVal) {
    if (props.type === 1) {
      getClubShare();  // 俱乐部分享接口
    } else {
      tournamentEventsShare();  // 赛事分享接口
    }
  }
});

// onMounted(async () => {
//     if(props.type == 1) {
//         await getClubShare()
//     } else {
//         await tournamentEventsShare()
//     }
// });

</script>

<style lang='scss' scoped>
.share_main {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 14px;

    .top_img {
        width: 100%;
    }

    // background-color: #131232;
}

.share_img {
    position: relative;
    height: 280px;
    width: 100%;
    background: #131232;
    margin-top: -60px;

    .qr_code_wrap {
        position: absolute;
        top: 10px;
        left: 50%;
        z-index: 100;
        border-radius: 12px;
        transform: translateX(-50%);
        border: 1px solid #2E296B;
        padding: 11px;
    }



    .close {
        position: absolute;
        bottom: -41px;
        left: 50%;
        height: 32px;
        transform: translateX(-46%)
    }

    // width: 236px;
    // height: 159px;
    // background: url(/imgs/me/mask.webp);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;

    .qr_code {
        border-radius: 12px;
        width: 170px;
        height: 170px;

    }
}

.mask_img {
    width: 236px;
    height: 159px;
    position: absolute;
    bottom: 35px;
    left: 50%;
    right: 0;
    z-index: 10;
    transform: translateX(-50%)
}

.share_bottom {
    position: absolute;
    bottom: 15px;
    display: flex;
    padding: 0 20px;
    gap: 13px;

    .save {
        width: 147px;
        height: 44px;
        background: #4B4A6E !important;
        border-radius: 8px;
    }

    .copy {
        width: 147px;
        height: 44px;
        border-radius: 8px;
    }


}

:deep(.nut-popup) {
    background: unset;
}
</style>